<template>
  <n-layout :native-scrollbar="false" class="p-20px">
    <n-grid x-gap="30" y-gap="30" :cols="8">
      <n-gi v-for="gua in $data.gua64XianTianList">
        <div @dblclick="handleGuaClick(gua)">
          <Gua 
            :height="100" 
            :binary="gua.binary"
            :active="currentRoute.params?.binary === gua.binary"
            >
          </Gua>
          <n-text tag="div" class="text-center w-full font-bold mt-.5">{{ gua.name }}</n-text>
        </div>
      </n-gi>
    </n-grid>
  </n-layout>
</template>

<script setup>
import Gua from '@/components/Gua.vue'

const $data = window.$data

const currentRoute = useRoute()

const handleGuaClick = (gua) => {
  $global.router.push(`/zhouyi/detail/${gua.binary}`)
}
</script>